<template>
  <div class="container">
    <div class="panel-header" style="width: 1133.99px">
      <div class="panel-title">活动详情</div>
      <div class="panel-tool" />
    </div>
    <el-divider />
    <div
      id="activityDetail"
      class="easyui-panel panel-body"
      title=""
      style="padding: 20px;"
    >
      <div class="blockItem">
        <div class="item">
          <div class="left">活动标题：</div>
          <div id="title" class="right">{{ infoData.title }}</div>
        </div>
        <div class="item">
          <div class="left">活动时间：</div>
          <div id="createTimeendTime" class="right">
            {{ infoData.startTime }} - {{ infoData.endTime }}
          </div>
        </div>
        <div class="item">
          <div class="left">活动时长：</div>
          <div id="duration" class="right">{{ infoData.duration }}</div>
        </div>
      </div>
      <div class="partItem">
        <div class="left">主展示位置：</div>
        <div id="location" class="right">首页轮播</div>
      </div>
      <div class="partItem">
        <div class="left">跳转链接：</div>
        <div class="right">
          <a id="href" :href="infoData.href">{{ infoData.href }}</a>

        </div>
      </div>
      <div class="partItem">
        <div class="left">优先级：</div>
        <div id="priority" class="right">{{ infoData.priority }}</div>
      </div>
      <div class="partItem">
        <div class="left">活动图片：</div>
        <div id="imageUrl" class="right">
          <img :src="infoData.imageUrl" style="width: 300px">
        </div>
      </div>
    </div>

    <div
      class="panel panel-htop easyui-fluid"
      style="display: block; width: 1134px"
    >
      <div class="panel-header" style="width: 1133.99px">
        <div class="panel-title">操作日志</div>
        <div class="panel-tool" />
      </div>
      <el-divider />
      <div
        id="history"
        class="easyui-panel panel-body"
        title=""
        style="padding: 20px; width: 1133.99px"
      >
        <ul>
          <li v-for="(item,index) in infoData.activityLogList" :key="index">
            <div class="noAndTimeAndAdminName">
              <div class="no">{{ index }}</div>
              <div class="time">{{ item.createTime }}</div>
              <span>修改</span>
              <div class="admin">{{ item.createBy }}</div>
            </div>
            <el-table
              v-if="item.data"
              ref="table"
              :key="tableKey"
              :data="item.data"
              border
              fit
              style="width: 100%"
            >
              <el-table-column
                label="项目"
                prop="name"
                :show-overflow-tooltip="true"
                align="center"
                min-width="120px"
              />
              <el-table-column
                label="修改前"
                prop="beforeValue"
                :show-overflow-tooltip="true"
                align="center"
                min-width="150px"
              />
              <el-table-column
                label="修改后"
                :show-overflow-tooltip="true"
                align="center"
                prop="afterValue"
                min-width="150px"
              />
            </el-table>
          </li>

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableKey: 1,
      infoData: {
        id: 17,
        title: 'ye',
        startTime: '2021-07-19 10:28:00',
        endTime: '2021-07-19 10:28:00',
        duration: '0天0小时0分',
        status: 2,
        source: 1,
        location: 1,
        href: '111',
        imageUrl: 'www.bd.com,www.ad.com,www.baidu.comuuuu',
        priority: 1,
        isDel: 0,
        createTime: '2021-07-19 14:44:02',
        createBy: 'nrbc',
        updateTime: '2021-07-19 15:21:54',
        updateBy: 'nrbc',
        activityLogList: [
          {
            id: 39,
            activeId: 17,
            data: null,
            createBy: 'nrbc17788888888',
            createTime: '2021-07-19 14:44:02',
            type: 1
          },
          {
            id: 41,
            activeId: 17,
            data: null,
            createBy: 'nrbc17788888888',
            createTime: '2021-07-19 15:15:12',
            type: 4
          },
          {
            id: 42,
            activeId: 17,
            data: null,
            createBy: 'nrbc17788888888',
            createTime: '2021-07-19 15:16:54',
            type: 2
          },
          {
            id: 43,
            activeId: 17,
            data: null,
            createBy: 'nrbc17788888888',
            createTime: '2021-07-19 15:19:06',
            type: 2
          },
          {
            id: 44,
            activeId: 17,
            data: null,
            createBy: 'nrbc17788888888',
            createTime: '2021-07-19 15:21:15',
            type: 4
          },
          {
            id: 45,
            activeId: 17,
            data: [{ 'afterValue': '2021-07-19 10:28:00', 'beforeValue': '2022-07-19 10:28:00', 'name': '结束时间' }],
            createBy: 'nrbc17788888888',
            createTime: '2021-07-19 15:22:06',
            type: 2
          }
        ]
      }
    }
  },
  created() {
    this.$get('/web/activity/get', { id: this.$route.query.id }).then(
      (res) => {
        if (res.data.code === '0') {
          const obj = res.data.data
          obj.activityLogList.forEach(element => {
            element.data = JSON.parse(element.data)
          })
          this.infoData = obj
        }
      }
    )
  },
  methods: {}
}
</script>

<style scoped lang="scss">
/deep/ .el-divider--horizontal {
  margin: 12px 0;
}

.container {
  margin: 20px;
}
.panel-header {
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  margin-top: 20px;
}
.blockItem {
  width: 100%;
  overflow: hidden;
  display: flex;
}

.blockItem .item {
  width: 33.33%;
  // float: left;

  padding: 10px 0;
  margin-right: 5px;
}

.partItem {
  width: 100%;
  padding: 10px 0;
  overflow: hidden;
}

.blockItem .item .left,
.blockItem .item .right,
.partItem .left,
.partItem .right {
  float: left;
}

.noAndTimeAndAdminName {
  overflow: hidden;
  padding: 20px 10px;
}

.noAndTimeAndAdminName .no,
.noAndTimeAndAdminName .time,
.noAndTimeAndAdminName span,
.noAndTimeAndAdminName .admin {
  float: left;
  width: 25%;
}
</style>
